<template>
  <div class="container-index">
    <div class="top_part clearfix">
      <!-- 广告位轮播 -->
      <div class="banner clearfix">
        <swiper>
          <block v-for="(item, index) in banner_arr"
                 :key="index"
                 :indicator-dots="true">
            <swiper-item>
              <img :src="base_url+item.image"
                   mode="widthFix"
                   class="img"
                   v-if="base_url&&item.image">
            </swiper-item>
          </block>
        </swiper>
      </div>
      <!-- 相对定位的tab -->
      <div class="tab-top clearfix">
        <div class="tab-item"
             v-for="(item, index) in tab_arr"
             :key="index"
             @tap="toggle(item)">
          <div class="msg"
               :class="{'active':item.id==tab_selected}">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
    <!-- 所有活动 -->
    <div class="all">
      <scroll-view :scroll-y="true"
                   :style="{'height': '100%'}"
                   @scroll="scroll"
                   :scroll-into-view="target">
        <div class="gamble"
             v-if="gamble_arr[0]"
             id="gamble">
          <div class="title">
            <div class="header">
              <div class="icon">
                <img :src="imgUrl+'mp_2.1/promotion/shizhing@2x.png'"
                     alt=""
                     v-if="imgUrl"
                     class="img">
              </div>
              <div class="msg">
                一分钱抽奖
              </div>
            </div>
            <div class="holder"></div>
          </div>
          <div class="list">
            <div class="list-item"
                 v-for="(val, index) in gamble_arr"
                 :key="index"
                 @tap="gamble_detail(val)">
              <div class="count-down">
                距结束剩余：
                <span class="time"
                      v-if="val.day-0<1">
                  <span class="num">{{val.hours}}</span>
                  :
                  <span class="num">{{val.minutes}}</span>
                  :
                  <span class="num">{{val.seconds}}</span>
                </span>
                <span class="day"
                      v-else>
                  <span class="num">{{val.day}}</span>天
                </span>
              </div>
              <div class="item-detail">
                <div class="item-img">
                  <img :src="base_url+val.img"
                       alt=""
                       v-if="base_url&&val.img"
                       class="img">
                </div>
                <div class="item-info">
                  <div class="item-name">
                    {{val.title}}
                  </div>
                  <div class="item-status">
                    <div class="schedule">
                      <div class="inner-bar"
                           :style="{'width': (val.part_sum/val.ok_sum)*100+'%'}">
                      </div>
                    </div>
                    <div class="tip">
                      {{val.part_sum}}/{{val.ok_sum}}
                    </div>
                  </div>
                  <div class="item-price">
                    <div class="icon">￥</div>
                    <div class="num">{{val.price}}</div>
                    <div class="old-price">
                      ￥{{val.yprice}}
                    </div>
                  </div>
                  <div class="item-btn">
                    参加抽奖
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 助力 -->
        <div class="help"
             id="help"
             v-if="help_arr[0]">
          <div class="title">
            <div class="header">
              <div class="icon">
                <img :src="imgUrl+'mp_2.1/promotion/zhuli icon@2x.png'"
                     alt=""
                     v-if="imgUrl"
                     class="img">
              </div>
              <div class="msg">
                助力
              </div>
            </div>
            <div class="holder"></div>
          </div>
          <div class="list">
            <!-- 遍历开始 -->
            <div class="list-item"
                 v-for="(item, key) in help_arr"
                 :key="key"
                 @tap="help_detail(item)">
              <!-- 倒计时 -->
              <div class="count-down">
                距结束剩余：
                <span class="time"
                      v-if="item.day-0<1">
                  <span class="num">{{item.hours}}</span>
                  :
                  <span class="num">{{item.minutes}}</span>
                  :
                  <span class="num">{{item.seconds}}</span>
                </span>
                <span class="day"
                      v-else>
                  <span class="num">{{item.day}}</span>天
                </span>

              </div>
              <div class="item-detail">
                <div class="item-img">
                  <img :src="base_url+item.img"
                       v-if="base_url&&item.img"
                       alt=""
                       class="img">
                </div>
                <div class="item-info">
                  <div class="item-name">
                    {{item.title}}
                  </div>
                  <!-- 进度条 -->
                  <div class="item-status">
                    <div class="msg">
                      已参加{{item.part_sum}}人
                    </div>
                  </div>
                  <div class="item-price">
                    <div class="icon">
                      助力价<span class="num">{{item.price}}元</span>
                    </div>
                    <div class="old-price">
                      ￥{{item.yprice}}
                    </div>
                  </div>
                  <div class="item-btn"
                       @tap.stop="help_detail (item)">
                    我要助力
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
      <div class="empty"
           v-if="gamble_arr.length==0&&help_arr.length==0">
        <img src="https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png"
             alt=""
             class="nothing">
        <div class="text">暂无活动哦~</div>
      </div>
    </div>

    <div class="to-index"
         @tap="to_index()">
      <img :src="imgUrl+'mp_2.1/promotion/shouye 15@2x.png'"
           v-if="imgUrl"
           alt=""
           class="img">
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
let timer
export default {
  data () {
    return {
      isfix: false,
      tab_arr: [
        {
          name: "抽奖",
          id: 1
        },
        {
          name: "助力",
          id: 2
        }
      ],
      imgUrl: common.image_resource,
      base_url: common.image_response,
      tab_selected: 1,
      target: "",
      banner_arr: [],
      gamble_arr: [null],
      help_arr: [null],
      tab_height: 500,
    }
  },
  methods: {
    scroll (e) {
      let page_scroll = e.mp.detail.scrollTop - 0;
      if (page_scroll > this.tab_height) {
        this.tab_selected = 2
      } else {
        this.tab_selected = 1
      }
      this.target = this.target == "" ? this.target : ""
    },
    toggle (item) {
      this.tab_selected = item.id
      switch (this.tab_selected) {
        case 1:
          this.target = "gamble";
          break;
        case 2:
          this.target = "help";
          break;
        default:
          break;
      }
    },
    get_data () {
      let that = this
      wx.showLoading({
        title: '加载中', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post('api/sale/v1_0/index', {}, (result) => {
        let res = result.data
        if (res.status_code == 0) {
          this.banner_arr = res.data.ads
          let arr_gamble = res.data.goods.draws
          let arr_help = res.data.goods.helps
          if (arr_gamble.length == 0 && arr_help.length > 0) {
            that.tab_selected = 2
          }
          that.timer = setInterval(() => {
            // 处理抽奖数据
            if (arr_gamble.length > 0) {
              // 当抽奖有数据进行遍历
              arr_gamble.forEach(val => {
                let now_time = new Date().getTime()
                let end_time = val.end * 1000 - now_time
                if (end_time <= 0) {
                  clearInterval(timer)
                  that.gamble_arr = []
                  that.get_data()
                  return false
                }
                //计算出相差天数
                let days = Math.floor(end_time / (24 * 3600 * 1000))
                //计算出小时数
                let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                let hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                let minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
                let seconds = Math.round(leave3 / 1000)
                val.day = days >= 10 ? days : '0' + days
                val.hours = hours >= 10 ? hours : "0" + hours
                val.minutes = minutes >= 10 ? minutes : "0" + minutes
                val.seconds = seconds >= 10 ? seconds : "0" + seconds
              });
            }

            // 处理助力数据
            if (arr_help.length > 0) {
              // 当助力有数据进行遍历
              arr_help.forEach(val => {
                let now_time = new Date().getTime()
                let end_time = val.end * 1000 - now_time
                if (end_time <= 0) {
                  clearInterval(timer)
                  that.help_arr = []
                  that.get_data()
                  return false
                }
                //计算出相差天数
                let days = Math.floor(end_time / (24 * 3600 * 1000))
                //计算出小时数
                let leave1 = end_time % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                let hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                let minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                let leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
                let seconds = Math.round(leave3 / 1000)
                val.day = days >= 10 ? days : '0' + days
                val.hours = hours >= 10 ? hours : "0" + hours
                val.minutes = minutes >= 10 ? minutes : "0" + minutes
                val.seconds = seconds >= 10 ? seconds : "0" + seconds
              });
            }
            this.gamble_arr = arr_gamble
            this.help_arr = arr_help
          }, 1000);
          wx.hideLoading();
          this.tab_height = arr_gamble.length * 152
        }
      })
    },
    to_index () {
      wx.switchTab({ url: '/pages/index/main' });
    },
    gamble_detail (val) {
      switch (val.is_part) {
        case 0:
          // 未参与
          wx.navigateTo({ url: '/pages/lucky_goods_more/main?goods_id=' + val.id });
          break;
        case 1:
          // 已参与
          let user_id = wx.getStorageSync('user_id')
          wx.navigateTo({ url: `/pages/my_group/main?goods_id=${val.id}&user_id=${val.share_user_id}` });
          break;

        default:
          break;
      }
    },
    help_detail (item) {
      wx.navigateTo({ url: '/pages/help_goods_more/main?&goods_id=' + item.id });
    }
  },
  onLoad () {
    clearInterval(timer)
    Object.assign(this.$data, this.$options.data());
    this.gamble_arr = []
    this.help_arr = []
  },
  onReady () {
    this.get_data()
  },
  onShow () {
    clearInterval(timer)
    Object.assign(this.$data, this.$options.data());
    this.gamble_arr = []
    this.help_arr = []
    this.get_data()
  },
  onUnload () {
    Object.assign(this.$data, this.$options.data());
    this.gamble_arr = []
    this.help_arr = []
    clearInterval(timer)
  },
  onHide () {
    Object.assign(this.$data, this.$options.data());
    this.gamble_arr = []
    this.help_arr = []
    clearInterval(timer)
  },
}
</script>

<style lang="less" scoped>
.container-index {
  height: 100%;
  background-color: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  .top_part {
    .banner {
      width: 100%;
      height: 175px;
      swiper {
        height: 100%;
      }
      .img {
        width: 100%;
        display: block;
      }
    }
    .tab-top {
      width: 100%;
      height: 36px;
      line-height: 36px;
      display: flex;
      background-color: #fff;
      position: relative;
      .tab-item {
        flex: 1;
        .msg {
          display: inline-block;
          font-size: 16px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          position: relative;
        }
        .active {
          color: rgba(255, 56, 62, 1);
          &::before {
            content: "";
            width: 100%;
            height: 2px;
            background: rgba(255, 56, 62, 1);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        &:nth-of-type(1) {
          .msg {
            float: right;
            margin-right: 45px;
          }
        }
        &:nth-of-type(2) {
          .msg {
            float: left;
            margin-left: 45px;
          }
        }
      }
    }
  }
  .all {
    width: 100%;
    flex: 1;
    margin-top: 8px;
    padding-bottom: 50px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .gamble {
      margin: 0 8px;
      .title {
        height: 42px;
        background: rgba(255, 225, 225, 1);
        border-radius: 10px 10px 0px 0px;
        .header {
          display: inline-block;
          padding-right: 10px;
          height: 26px;
          background: linear-gradient(
            213deg,
            rgba(255, 134, 105, 1) 0%,
            rgba(254, 106, 156, 1) 100%
          );
          border-radius: 8px 20px 20px 0px;
          .icon {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-left: 7px;
            margin-right: 2px;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .msg {
            line-height: 26px;
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            font-family: "Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            letter-spacing: 1px;
          }
        }
        .holder {
          width: 60px;
          height: 16px;
          background: linear-gradient(
            213deg,
            rgba(255, 134, 105, 1) 0%,
            rgba(254, 106, 156, 1) 100%
          );
        }
      }
      .list {
        width: 100%;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        position: relative;
        top: -16px;
        .list-item {
          margin: 0 8px;
          padding-bottom: 16px;
          border-bottom: 1px solid rgba(223, 223, 223, 1);
          &:last-of-type {
            border-bottom: none;
          }
          .count-down {
            height: 36px;
            line-height: 36px;
            // padding-left: 8px;
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            vertical-align: middle;
            .num {
              display: inline-block;
              vertical-align: middle;
              width: 16px;
              height: 16px;
              background: rgba(255, 56, 62, 1);
              line-height: 16px;
              text-align: center;
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
            }
            .day {
              vertical-align: middle;
              .num {
                margin-right: 3px;
                vertical-align: middle;
              }
            }
          }
          .item-detail {
            // margin: 0 8px;
            display: flex;
            .item-img {
              width: 100px;
              height: 100px;
              .img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .item-info {
              flex: 1;
              padding-left: 12px;
              position: relative;
              .iten-name {
                font-size: 16px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 22px;
              }
              .item-status {
                margin-top: 8px;
                .schedule {
                  width: 105px;
                  height: 12px;
                  border-radius: 7px;
                  display: inline-block;
                  vertical-align: bottom;
                  background: repeating-linear-gradient(
                    -45deg,
                    #ffe8e8 0px,
                    #ffe8e8 5px,
                    #ffedec 5px,
                    #ffedec 10px
                  );
                  border: 1px solid #ffced0;
                  overflow: hidden;
                  .inner-bar {
                    height: 100%;
                    width: 50%;
                    border-radius: 7px;
                    background: repeating-linear-gradient(
                      -45deg,
                      #ff3733 0px,
                      #ff3733 5px,
                      #ff5847 5px,
                      #ff5847 10px
                    );
                    font-size: 9px;
                    font-family: "Medium";
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    line-height: 12px;
                    text-align: center;
                  }
                }
                .tip {
                  display: inline-block;
                  vertical-align: bottom;
                  margin-left: 7px;
                  font-size: 12px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(102, 102, 102, 1);
                }
              }
              .item-price {
                vertical-align: bottom;
                position: absolute;
                bottom: 0;
                left: 12px;
                .icon {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 10px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 56, 62, 1);
                }
                .num {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 18px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(255, 56, 62, 1);
                }
                .old-price {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 12px;
                  font-family: "STHeitiTC-Light";
                  font-weight: 300;
                  color: rgba(102, 102, 102, 1);
                  margin-left: 5px;
                  position: relative;
                  &::before {
                    content: "";
                    width: 100%;
                    height: 2px;
                    background: rgba(102, 102, 102, 1);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
              }
              .item-btn {
                width: 66px;
                height: 29px;
                background: rgba(255, 74, 135, 1);
                border-radius: 6px;
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 29px;
                text-align: center;
                position: absolute;
                bottom: 0;
                right: 0;
              }
            }
          }
        }
      }
    }
    .help {
      margin: 0 8px;
      padding-bottom: 400px;
      .title {
        height: 42px;
        background: rgba(255, 225, 225, 1);
        border-radius: 10px 10px 0px 0px;
        .header {
          display: inline-block;
          padding-right: 10px;
          height: 26px;
          background: linear-gradient(
            90deg,
            rgba(255, 97, 61, 1) 0%,
            rgba(255, 140, 25, 1) 100%
          );
          border-radius: 8px 20px 20px 0px;
          .icon {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-left: 7px;
            margin-right: 2px;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .msg {
            line-height: 26px;
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            font-family: "Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            letter-spacing: 1px;
          }
        }
        .holder {
          width: 60px;
          height: 16px;
          background: linear-gradient(
            90deg,
            rgba(255, 97, 61, 1) 0%,
            rgba(255, 140, 25, 1) 100%
          );
        }
      }
      .list {
        width: 100%;
        background: rgba(255, 255, 255, 1);
        border-radius: 10px;
        position: relative;
        top: -16px;
        .list-item {
          margin: 0 8px;
          padding-bottom: 16px;
          border-bottom: 1px solid rgba(223, 223, 223, 1);
          &:last-of-type {
            border-bottom: none;
          }
          .count-down {
            height: 36px;
            line-height: 36px;
            // padding-left: 8px;
            font-size: 14px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 56, 62, 1);
            vertical-align: middle;
            .num {
              display: inline-block;
              vertical-align: middle;
              width: 16px;
              height: 16px;
              background: rgba(255, 56, 62, 1);
              line-height: 16px;
              text-align: center;
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
            }
            .day {
              vertical-align: middle;
              .num {
                margin-right: 3px;
                vertical-align: middle;
              }
            }
          }
          .item-detail {
            // margin: 0 8px;
            display: flex;
            .item-img {
              width: 100px;
              height: 100px;
              background-color: #ccc;
              .img {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            .item-info {
              flex: 1;
              padding-left: 12px;
              position: relative;
              .iten-name {
                font-size: 16px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 22px;
              }
              .item-status {
                margin-top: 8px;
                .msg {
                  font-size: 13px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                }
              }
              .item-price {
                vertical-align: bottom;
                position: absolute;
                bottom: 0;
                left: 12px;
                .icon {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 14px;
                  font-family: "Medium";
                  font-weight: 400;
                  color: #333333;
                }
                .num {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 14px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(255, 56, 62, 1);
                  margin-left: -4px;
                }
                .old-price {
                  display: inline-block;
                  vertical-align: bottom;
                  font-size: 12px;
                  font-family: "STHeitiTC-Light";
                  font-weight: 300;
                  color: rgba(102, 102, 102, 1);
                  margin-left: 5px;
                  position: relative;
                  &::before {
                    content: "";
                    width: 100%;
                    height: 2px;
                    background: rgba(102, 102, 102, 1);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
              }
              .item-btn {
                width: 66px;
                height: 29px;
                background: rgba(255, 98, 60, 1);
                border-radius: 6px;
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 29px;
                text-align: center;
                position: absolute;
                bottom: 0;
                right: 0;
              }
            }
          }
        }
      }
    }
    .empty {
      width: 154px;
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      .nothing {
        width: 128px;
        height: 114px;
        margin: 0 auto;
        display: block;
      }
      .text {
        width: 100%;
        margin: 0 auto;
        font-size: 14px;
        font-weight: 400;
        margin-top: 13px;
        color: rgba(153, 153, 153, 1);
        text-align: center;
      }
    }
  }
  .mb {
    padding-top: 50px;
  }
  .to-index {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    position: absolute;
    right: 16px;
    bottom: 80px;
    z-index: 20;
    .img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>


